<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>无缝滚动2</title>
    <link rel="stylesheet" href="./banner.css" />
    <script src="./animate.js"></script>
  </head>

  <body>
    <div class="banner">
      <!-- 轮播图 -->
      <ul class="imgBox clearFix">
        <li class="slider" style="background-color: red">A</li>
        <li class="slider" style="background-color: orange">B</li>
        <li class="slider" style="background-color: green">C</li>
        <li class="slider" style="background-color: pink">D</li>
        <li class="slider" style="background-color: yellow">E</li>
      </ul>

      <!-- 指示器存放处 -->
      <ol class="pointBox"></ol>

      <div class="leftRightTabs">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
      </div>
    </div>

    <script>
      /* 找出元素 */
      // 轮播图
      var ul = document.querySelector(".imgBox");
      // 幻灯片页
      var sliders = ul.querySelectorAll(".slider");

      // 指示器容器
      var ol = document.querySelector(".pointBox");

      // 上一张 下一张
      var btnPrev = document.querySelector(".prev");
      var btnNext = document.querySelector(".next");

      /* 添加欺骗头尾 [5]12345[1]*/
      ul.innerHTML =
        `<li class="slider" style="background-color: yellow">5</li>` +
        ul.innerHTML +
        `<li class="slider" style="background-color: red">1</li>`;
      ul.style.width = 600 * 7 + "px";

      // 当前页码(0~6)  [5]12345[1]
      var currentIndex = 1;

      /* 添加指示器 */
      // 每张幻灯片对应一个指示器小圆点
      sliders.forEach(function (slider, index) {
        var pointer = document.createElement("li");
        pointer.setAttribute("index", index + 1);
        ol.appendChild(pointer);
      });
      // 找出所有的指示器
      var pointers = ol.querySelectorAll("li");
      updatePointers();

      /* 封装运动 */
      function fn() {
        animate(
          ul, //想染谁动
          { left: -600 * currentIndex + "px" }, //目标状态
          500, //耗时
          // 动画结束回调函数
          function () {
            console.log("动画结束了，callback被回调了", currentIndex);

            /* 移形换影 6=>1 0=>5*/
            if (currentIndex === 6) {
              currentIndex = 1;
              // 瞬间移位
              ul.style.left = -600 * currentIndex + "px";
            }
            if (currentIndex === 0) {
              currentIndex = 5;
              // 瞬间移位
              ul.style.left = -600 * currentIndex + "px";
            }

            // 对应的指示器高亮
            updatePointers();
          }
        );
      }

      /* 页码更新时 指示器也随之更新 */
      function updatePointers() {
        pointers.forEach(function (p) {
          p.classList.remove("active");
        });

        /* 更新指示器思路一 */
        // currentIndex = 【0】 1 2 3 4 5 【6】
        // pointersIndex =      0 1 2 3 4
        // pointers[currentIndex - 1].classList.add("active");

        /* 更新指示器思路二 */
        // 找出index属性为currentIndex的指示器，令其高亮
        // 将指示器伪数组转为真数组（以便使用批处理函数find）
        var pointerArr = Array.from(pointers);
        // find的作用相当于filter后取第0个符合条件的元素
        pointerArr
          .find(function (pointerLi) {
            // 哪个指示器li暗藏的index属性值等当前页码
            return pointerLi.getAttribute("index") == currentIndex;
          })
          .classList.add("active");
      }

      /* 添加互动 */
      // 上一张
      btnPrev.onclick = function (e) {
        // 让Ul的left样式-600像素
        // ul.style.left = parseFloat(getComputedStyle(ul).left) + 600 + "px";
        currentIndex--;
        fn();
      };

      // 下一张
      btnNext.onclick = function (e) {
        // 让Ul的left样式-600像素
        // ul.style.left = parseFloat(getComputedStyle(ul).left) - 600  +"px"
        currentIndex++;
        fn();
      };

      // 点击指示器
      ol.onclick = function (e) {
        if (e.target.nodeName === "LI") {
          var index = e.target.getAttribute("index");
          console.log(index);

          // 滑动到对应的目标页
          currentIndex = index;
          fn();
        }
      };
    </script>
  </body>
</html>
